<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/jquery.treetable.theme.default.css" />
  <script src="./js/jquery-3.7.1.js"></script>
  <script src="./js/jquery.treetable.js"></script>
  <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
  <script src="./js//custom.treetable.js"></script>
</head>

<body>
  <table id="tableTree">
    <thead>
      <tr>
        <th>ID</th>
        <th>部门及人员</th>
        <th>添加时间</th>
        <th>是否显示</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <!-- 封装ajax方法 -->
  <script type="text/javascript">
    const $ajax = (url, cb) => {
      $.ajax({
        url: `./data/${url}.json`,
        type: "GET",
        dataType: "json",
        success: function (data) {
          cb && cb(data);
        },
        error: function (xhr, status, error) {
          console.error("Error loading JSON file: " + error);
        },
      });
    };
  </script>
  <script>
    $(function () {
      $ajax("data", function ({ list }) {
        let content = "";
        list.forEach((item) => {
          content += `
          <tr data-id="${item.ID}" data-pid="${item.parentId}">
            <td>
              <span class=${item.isLeaf ? "file" : 'folder'}>${item.ID}</span>
            </td>
            <td>${item.title}</td>
            <td>${item.time}</td>
            <td>${item.is_show}</td>
            <td>
              <button data-id="${item.ID}" onclick="edit(event)">修改</button>
              <button data-id="${item.ID}" onclick="del(event)">删除</button>
            </td>
          </tr>`;
        });

        $("#tableTree").children('tbody').append(content);
        initTreeData();
      });
    });
  </script>
</body>

</html>